<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:q="http://huliqing.name/qfaces"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/example/_template.xhtml">
	<ui:define name="title">inputHelp</ui:define>
	<ui:define name="header">inputHelp组件示例</ui:define>
	<ui:define name="content">
		<style type="text/css" >
			div{border:0px solid red;}
			.def  {vertical-align:top;}
			.row1 {background:#FFF;}
			.row2 {background:#F0F0F0;}
			.col1 {color:red;}
			.col2 {color:green;}
			.col3 {border-bottom:1px dotted #C0C0C0;}
			.selected {background:orange;color:blue;}
			.colA {font-weight:bold;color:white;}
			.colB {color:BLACK;}
			.header {padding:5px;font-weight:bold;background:blue;color:#FFF;}
			.footer {background:#CCC;padding:3px;}
			.title {color:orange;font-weight:bold;}
			.panel {background:GRAY;border:3px solid #C0C0C0;padding:3px;}
		</style>
		
		<h:panelGrid 
			columns="3" 
			border="0" 
			columnClasses="def,def,def" 
			cellspacing="0" 
			cellpadding="20"
			style="margin-bottom:250px;">
			<h:panelGroup>
				Demo 1 - 一般
				<h:form>
				<q:inputHelp 
					for="input1" 
					listener="#{inputHelpBean.listenerRefOneValue}"
					footer="帮助：比较简单的用法"
					columnClasses="col1,col2">
					<h:inputText id="input1" size="40"/>
				</q:inputHelp>
				</h:form>
			</h:panelGroup>
			
			<h:panelGroup>
				Demo 2 - 引用多个值
				<br />
				<h:inputText id="input2" value="v1" />
				<br />
				<h:inputText id="input3" value="v2" />
				<br />
				<q:inputHelp 
					for="input4"
					ref="input2,input3" 
					listener="#{inputHelpBean.listenerRefManyValue}"
					columnClasses="col3">
					<h:inputText id="input4" size="40"/>
				</q:inputHelp>
			</h:panelGroup>
			
			<h:panelGroup>
				Demo 3 - 完整参数
				<h:form id="form1">
				<q:inputHelp 
					id="myInputHelp"
					for="input5" 
					listener="#{inputHelpBean.listenerRefOneValue}"
					delay="200"
					selectIndex="0"
					autoClose="false"
					onSelect="if (confirm('你选择了：' + 
					QFaces.Faces.find('myInputHelp').getValue() + 
					', 是否提交表单?')) 
					document.forms['form1'].submit()"
					
					header="INPUT HELP"
					footer="Author:huliqing@live.com"
					title="NAME,AGE,EMAIL"
					styleClass="panel"
					headerClass="header"
					footerClass="footer"
					titleClass="title"
					styleSelectedClass="selected"
					rowClasses=""
					columnClasses="colA,colB,colB">
					<h:inputText id="input5" size="40"/>
				</q:inputHelp>
				</h:form>
			</h:panelGroup>
		</h:panelGrid>
	</ui:define>
	
	<ui:define name="description" >
		这是一个可提供录入帮助的组件，组件通过Ajax方式将当前用户的录入值传到后台，
		由后台执行相应的逻辑或搜索之后，显示一些可选列表
		返回界面给用户选择，从而达到提升用户体验的目的。
	</ui:define>
	<ui:define name="htmlCode" >
		<h:outputText value="#{inputHelpBean.htmlCode}" />
	</ui:define>
	<ui:define name="javaCode" >
		<h:outputText value="#{inputHelpBean.javaCode}" />
	</ui:define>
</ui:composition>